Skip to content

Revert widget/dashboard architecture and clean up artifacts - #14

Merged
sarg3nt merged 14 commits into
mainfrom
feature/yaml-widget-dashboards
Mar 1, 2026
Merged

Revert widget/dashboard architecture and clean up artifacts#14
sarg3nt merged 14 commits into
mainfrom
feature/yaml-widget-dashboards

Conversation

@sarg3nt

@sarg3nt sarg3nt commented Mar 1, 2026

Copy link
Copy Markdown
Owner

Summary

  • Reverts the Plugin-to-Widget architecture migration that was added in a prior feature branch
  • Removes all dashboard and widget framework code (~12,000 lines deleted across 96 files)
  • Cleans up widget registration from all 8 plugins (HAProxy, Alerts, Logs, Metrics, Traffic, Certificates, Services, OS Updates)
  • Fixes HAProxy handlers that were redirecting to dead /dashboards/haproxy-overview URLs — now renders templ components directly
  • Removes dashboard UI (editor, manager, palette, settings page, sidebar link)
  • Adds Chart.js-based chart partials and metrics API endpoints as standalone improvements (not widget-dependent)
  • Adds retry logic to agent client for resilient server communication
  • Runs go mod tidy to remove unused yaml.v3 dependency

Test plan

  • Verify make templ-generate && make build succeeds
  • Confirm HAProxy overview page renders correctly (no redirect to deleted dashboard URLs)
  • Confirm Settings page no longer shows "Dashboards" link
  • Verify all 8 plugin pages load without errors
  • Confirm chart partials render on the metrics/history page
  • Check sidebar navigation has no broken links

🤖 Generated with Claude Code

sarg3nt and others added 13 commits February 1, 2026 21:19
…1A-D)

This is the first phase of replacing hardcoded plugin pages with YAML-defined widget dashboards (issue #13). Implements Chart.js time-series charts as reusable widgets.

**Phase 1F - Shared Chart.js Utilities:**
- chart-defaults.js: Shared Chart.js configuration, color themes, zoom options
- chart-fullscreen.js: Fullscreen toggle functionality for charts
- chart-sse.js: SSE connection management for real-time updates
- dashboard-controls.js: Dashboard-level controls (time range, resolution, zoom reset)
- charts.css: Chart widget and fullscreen mode styles

**Phase 1A - Chart API Endpoints:**
- api_charts.go: 7 new API handlers that return HTML chart fragments
- Routes registered in main.go for each chart type
- chart_partials.templ: Templ templates for Chart.js chart widgets
  - SessionsRequestsChartPartial
  - ServerHealthChartPartial
  - CPULoadChartPartial
  - MemoryUsageChartPartial
  - NetworkThroughputChartPartial
  - ResponseTimesChartPartial
  - ErrorRatesChartPartial

**Phase 1B - Chart Widget Definitions:**
- chart_widgets.go: Widget definitions for all 7 chart types
- Registered in metrics plugin initialization
- Category: "historical-metrics"
- Config: box_id, hours, limit

**Phase 1D - YAML Dashboard Definition:**
- metrics-history.yaml: Dashboard matching the /history page layout
- 7 chart widgets arranged in 2 rows (4+3 layout)
- Default: 24 hours, 500 data points

**Next Steps:**
- Phase 1C: Implement dashboard-level controls integration
- Phase 1E: Grid rendering responsive layout updates
- Testing and side-by-side comparison with /history page

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
- Added /static/css/charts/charts.css to base.templ
- This provides chart-aspect-container and fullscreen styles
- Framework already handles box_id → serverID mapping automatically

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
The previous approach used {} template expressions inside <script> tags which
don't work in templ. Changed to use 'script' template blocks which properly
handle JavaScript code generation with parameter interpolation.

This fixes the 'SyntaxError: missing : after property id' errors.

Only converted SessionsRequestsChartPartial for now - will update remaining
charts once this is verified working.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…iables

The 'script' template type wraps code in functions which breaks ES6 imports.
Changed to use templ.Raw() with fmt.Sprintf() to interpolate variables directly
into the JavaScript code while keeping it as a proper ES6 module.

This should fix the import and syntax errors.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Replace broken template expressions in chart scripts with a working
pattern that uses data attributes to pass parameters and dynamic
import() promises to load ES6 modules. This fixes JavaScript syntax
errors that prevented charts from rendering.

Changes:
- Pass boxID, hours, limit via data-* attributes on script tags
- Read parameters using document.currentScript.dataset
- Use dynamic import().then() instead of static imports
- Apply pattern to all 7 chart partials consistently

Fixes chart rendering issues where template expressions like
{ fmt.Sprintf() } were rendering literally instead of being
evaluated, causing "SyntaxError: missing : after property id"
errors in the browser console.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
…JavaScript

Rewrote all 7 chart partials to use async IIFE pattern with template
expressions only in variable declarations at the top. This ensures
variables are properly evaluated before being used in async import
statements.

Key changes:
- Wrap entire script in (async function() { ... })()
- Declare boxID, hours, limit at top with template expressions
- Use await import() for cleaner async module loading
- Avoid document.currentScript which returns null in modules

This fixes "can't access property 'dataset', script is null" errors
that prevented charts from rendering.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Complete rewrite of the chart rendering approach:

1. Converted chart-defaults.js from ES6 module to global IIFE
   namespaced under window.GearboxCharts
2. Merged fullscreen functionality into chart-defaults.js
3. Added chart-defaults.js as a global script in base.templ
4. Rewrote all 7 chart partials to use templ's `script` keyword
   instead of HTML `<script>` tags

The templ `script` keyword properly serializes Go variables to
JavaScript (unlike `<script>` tags where template expressions
render as literal text). This follows the same proven pattern used
by the existing chart_widgets.templ (lineChartScript, etc).

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Wrap the dashboard grid in a bg-white/slate-800 rounded card with
shadow and padding to match the visual style of the existing history
page. Also updated metrics-history.yaml (gitignored) to use width 3
for row 2 charts so they match row 1 sizing instead of stretching
full width.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
feat: add comprehensive design document for Gearbox
- Deleted the metrics chart widgets implementation from chart_widgets.go.
- Removed the registration of historical chart widgets in the plugin initialization.
- Updated the dashboard editor to handle widget addition and rendering without relying on the removed metrics widgets.
- Enhanced the widget palette with drag-and-drop functionality for adding widgets to the dashboard.
- Introduced a new sortable-loader.js to load Sortable.js with the Swap plugin for improved drag-and-drop support.
- Reverted the implementation of the widget-based dashboard architecture due to over-engineering concerns, retaining reusable components as standalone pieces.
- Updated TASKS_ARCHIVE.md to reflect the reverted status and key achievements.
- Modified getting-started.md to clarify plugin page addition in navigation.
- Removed outdated dashboards and widgets documentation from plugins.md.
- Deleted the plugin work summary report as it is no longer relevant.
- Deleted the widget palette management script which handled loading, filtering, and displaying widgets from enabled plugins.
- Removed the sortable loader script that imported and initialized Sortable.js with the Swap plugin.
Copilot AI review requested due to automatic review settings March 1, 2026 01:13

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Reverts the prior widget/dashboard architecture and removes related framework code, while keeping/adding standalone charting + metrics/services partial endpoints and improving agent resiliency.

Changes:

  • Deleted the dashboard/widget framework and removed widget registration hooks from plugins.
  • Replaced HAProxy redirects to deleted dashboard URLs with direct page rendering via templ pages.
  • Added Chart.js utilities/styles plus new HTML-partial API endpoints for metrics/charts/services, and added dial retry logic to the agent client.

Reviewed changes

Copilot reviewed 96 out of 97 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
gearbox/static/js/dashboard/sortable-loader.js Removes dashboard-specific SortableJS module loader.
gearbox/static/js/charts/chart-sse.js Adds SSE connection utilities for live chart updates.
gearbox/static/js/charts/chart-fullscreen.js Adds fullscreen toggling helpers for chart cards.
gearbox/static/js/charts/chart-defaults.js Adds global Chart.js defaults/utilities and fullscreen helper.
gearbox/static/css/charts/charts.css Adds shared chart sizing + fullscreen CSS.
gearbox/internal/plugins/traffic/widgets.go Removes traffic widget definitions/registration.
gearbox/internal/plugins/traffic/plugin.go Removes widget registration and dashboard-related interfaces from traffic plugin.
gearbox/internal/plugins/services/widgets.templ Removes services widget templ components.
gearbox/internal/plugins/services/widgets.go Removes services widget definitions/registration.
gearbox/internal/plugins/services/plugin.go Removes widget registration and dashboard-related interfaces from services plugin.
gearbox/internal/plugins/services/partials.templ Adds HTMX partials for services overview/list/failed rendering.
gearbox/internal/plugins/os_updates/widgets.templ Removes OS updates widget templ components.
gearbox/internal/plugins/os_updates/widgets.go Removes OS updates widget definitions/registration.
gearbox/internal/plugins/os_updates/plugin.go Removes widget registration and dashboard-related interfaces from OS updates plugin.
gearbox/internal/plugins/metrics/widgets.templ Removes legacy metrics widget templ components.
gearbox/internal/plugins/metrics/plugin.go Removes widget registration and dashboard-related interfaces from metrics plugin.
gearbox/internal/plugins/metrics/partials.templ Adds HTMX partials for metrics “widget” fragments.
gearbox/internal/plugins/logs/plugin.go Removes dashboard/widget interface methods from logs plugin.
gearbox/internal/plugins/haproxy/widgets_htmx.templ Removes HAProxy widget HTMX placeholders.
gearbox/internal/plugins/haproxy/widgets.templ Removes HAProxy widget templ components.
gearbox/internal/plugins/haproxy/widgets.go Removes HAProxy widget definitions/registration.
gearbox/internal/plugins/haproxy/plugin.go Removes widget registration and dashboard-related interfaces from HAProxy plugin.
gearbox/internal/plugins/haproxy/handlers.go Stops redirecting to deleted dashboards; renders templ pages directly.
gearbox/internal/plugins/dashboard/widgets_htmx.templ Removes dashboard plugin widget HTMX placeholders.
gearbox/internal/plugins/dashboard/widgets.templ Removes dashboard plugin widget templ components.
gearbox/internal/plugins/dashboard/widgets.go Removes dashboard plugin widget definitions/registration.
gearbox/internal/plugins/dashboard/plugin.go Removes the dashboard core plugin.
gearbox/internal/plugins/dashboard/icons.go Removes dashboard sidebar icon component.
gearbox/internal/plugins/dashboard/handlers.go Removes dashboard plugin handlers.
gearbox/internal/plugins/dashboard/README.md Removes dashboard plugin documentation.
gearbox/internal/plugins/certificates/widgets.templ Removes certificates widget templ components.
gearbox/internal/plugins/certificates/widgets.go Removes certificates widget definitions/registration.
gearbox/internal/plugins/certificates/plugin.go Removes widget registration and dashboard-related interfaces from certificates plugin.
gearbox/internal/plugins/alerts/widgets.go Removes alerts widget definitions/registration.
gearbox/internal/plugins/alerts/plugin.go Removes widget registration and dashboard-related interfaces from alerts plugin.
gearbox/internal/framework/widget/widgets/status_card.templ Removes widget framework UI building blocks.
gearbox/internal/framework/widget/widgets/refresh_control.templ Removes widget framework UI building blocks.
gearbox/internal/framework/widget/widgets/placement_box.templ Removes widget framework UI building blocks.
gearbox/internal/framework/widget/widgets/collapsible_container.templ Removes widget framework UI building blocks.
gearbox/internal/framework/widget/widget.go Removes widget core types/rendering.
gearbox/internal/framework/widget/top_bar.go Removes widget top-bar control registry/types.
gearbox/internal/framework/widget/registry.go Removes widget registry.
gearbox/internal/framework/widget/datasource.go Removes widget data source registry.
gearbox/internal/framework/templates/pages/user_pages.templ Removes Settings “Dashboards” link.
gearbox/internal/framework/templates/layouts/base.templ Adds global chart CSS and chart defaults JS to base layout.
gearbox/internal/framework/plugin/interface.go Removes DashboardPlugin and widget/datasource definitions from plugin interfaces.
gearbox/internal/framework/plugin/dependencies.go Removes WidgetRegistry from plugin dependencies.
gearbox/internal/framework/handler/plugins.go Removes plugin dashboard auto-deploy logic and YAML/dashboard imports.
gearbox/internal/framework/handler/pages.go Updates migration note to point overview/status-grid to HAProxy plugin.
gearbox/internal/framework/handler/handler.go Removes dashboard storage field + setter.
gearbox/internal/framework/handler/dashboard_manager.go Removes dashboards manager/settings handlers.
gearbox/internal/framework/handler/api_services.go Adds HTMX HTML partial rendering paths for services + helper fetcher.
gearbox/internal/framework/handler/api_metrics.go Adds HTMX HTML partial endpoints for metrics “widget” fragments.
gearbox/internal/framework/handler/api_charts.go Adds HTMX HTML partial endpoints for Chart.js-based charts.
gearbox/internal/framework/dashboard/validator.go Removes dashboard YAML validation.
gearbox/internal/framework/dashboard/storage.go Removes dashboard YAML storage.
gearbox/internal/framework/dashboard/slug.go Removes dashboard slug helpers.
gearbox/internal/framework/dashboard/reset.go Removes dashboard reset logic.
gearbox/internal/framework/dashboard/renderer.go Removes dashboard renderer.
gearbox/internal/framework/dashboard/import.go Removes dashboard YAML import logic.
gearbox/internal/framework/dashboard/export.go Removes dashboard YAML export logic.
gearbox/internal/framework/dashboard/dashboard_grid.templ Removes dashboard grid renderer templates.
gearbox/internal/framework/dashboard/dashboard.go Removes dashboard config types/metadata.
gearbox/internal/framework/agent/client.go Adds retrying dialer logic for agent client resilience.
gearbox/go.sum Updates module checksums after tidy.
gearbox/go.mod Removes direct yaml.v3 dependency.
gearbox/cmd/server/main.go Removes dashboard/widget initialization; registers new metrics/charts/services partial API routes.
docs/reports/plugin-work-summary.md Removes outdated report referencing widget/dashboard work.
docs/getting-started.md Updates docs to remove dashboard/widget guidance.
docs/TASKS_ARCHIVE.md Adds docs-local tasks archive.
TASKS_ARCHIVE.md Removes repo-root tasks archive (moved under docs/).
README.md Updates README to remove widget/dashboard architecture references.
DESIGN.md Adds high-level design doc describing plugin-page architecture.
CLAUDE.md Updates contributor AI guidance to remove widget/dashboard references.
.github/copilot-instructions.md Updates Copilot project guidance to remove widget/dashboard references.
.claude/skills Adds submodule pointer under .claude.
Comments suppressed due to low confidence (6)

gearbox/internal/plugins/services/partials.templ:1

  • FilterFailed currently returns all non-active services (including “inactive/stopped”), but FailedServicesPartial renders everything in this list as “Failed”. This will mislabel stopped services as failed. Filter by failure state instead (e.g., svc.Status == "failed"), or rename the function + UI to reflect that it’s “non-active” rather than “failed”.
    gearbox/static/js/charts/chart-sse.js:1
  • isSSEConnected can return null (when eventSource is null) instead of a boolean. Return a strict boolean (e.g., return !!eventSource && eventSource.readyState === EventSource.OPEN;) to match the JSDoc contract and avoid downstream truthiness bugs.
    gearbox/internal/plugins/haproxy/handlers.go:1
  • On an unexpected deps.Servers type, getServers returns nil, and the callers treat len(servers) == 0 as “no servers configured” and redirect to /settings/boxes. That masks an internal wiring error as a normal “no servers” state. Prefer returning an error (or writing a 500 response in the caller) so misconfiguration is surfaced correctly.
    gearbox/internal/framework/templates/layouts/base.templ:1
  • These chart assets are now loaded on every page via the base layout. If only a subset of pages actually render Chart.js widgets, consider making these conditional (or lazy-loading) to reduce CSS/JS payload and improve first-render performance across the app.
    gearbox/static/js/charts/chart-fullscreen.js:1
  • Generating an inline onclick="..." string encourages handler-string injection bugs and makes it harder to lint/test. Prefer returning a DOM node (or using a template without behavior) and attaching the click handler via addEventListener from code.
    gearbox/static/js/charts/chart-defaults.js:1
  • Fullscreen toggle logic now exists in both this global script (window.GearboxCharts.toggleFullscreen) and the new ES module chart-fullscreen.js. Having two implementations increases the chance of behavioral drift. Consider consolidating to a single source of truth (either global-only or module-only) and having the other call into it.

Comment thread gearbox/internal/framework/agent/client.go
Comment thread gearbox/cmd/server/main.go
Comment thread gearbox/internal/framework/handler/api_charts.go Outdated
Comment thread DESIGN.md Outdated
- Remove dead APIServicesListHTMLHandler (already handled by HX-Request
  check in APIServicesHandler)
- Add upper bounds to chart query params (hours capped at 168, limit at 5000)
- Update DESIGN.md to reflect 7 dashboard plugins (Dashboard plugin removed)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@sarg3nt sarg3nt self-assigned this Mar 1, 2026
@sarg3nt
sarg3nt merged commit 1831269 into main Mar 1, 2026
17 checks passed
@sarg3nt
sarg3nt deleted the feature/yaml-widget-dashboards branch May 10, 2026 08:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants